<template>
    <div>
<!--        isAuthUser:{{isAuthUser()}}-->
        <el-form>
            <el-form-item v-if="isAuthUser()" label="模式：">
                <el-switch
                        v-model="filter.editMode"
                        active-text="编辑模式"
                        inactive-text="预览模式" @change="changeFilter">
                </el-switch>
            </el-form-item>
            <el-form-item label="章节：">
                <el-select v-model="filter.chapterId" placeholder="请选择" @change="changeChapter">
                    <el-option
                            v-for="item in chapterList"
                            :key="item.id"
                            :label="item.label"
                            :value="item.id">
                    </el-option>
                </el-select>
                <span v-if="filter.editMode" style="margin-left: 5px;">
                    <el-button type="primary" @click="toUpdateChapter">编辑</el-button>
                    <el-button type="primary" @click="toAddChapter">添加</el-button>
                    <!--                    <el-input v-model="filter.newChapterName"></el-input>-->
                </span>
            </el-form-item>
        </el-form>
        <div v-loading="loading">
            <div v-for="(item, index) in dataList" :key="index" style="margin-bottom: 5px;">
                {{index + 1}}、
                <div v-if="!filter.editMode">
                    {{item.ques}}
                </div>
                <div v-else>
                    <el-input v-model="item.ques" style="width:300px;" @change="markItemDraft(item)"></el-input>
                    <el-input style="width:300px;margin-left:5px;" v-model="item.stdAnswer" placeholder="标准答案"
                              @keyup.native.enter="getCn(item)" @change="markItemDraft(item)">
                        <el-button slot="append" icon="el-icon-search" @click="getCn(item)"></el-button>
                    </el-input>
                    <span v-if="item.cnTxt">
                        {{item.cnTxt}}
                    </span>
                    <el-checkbox style="margin-left:5px;" v-model="item.caseSensitive" @change="markItemDraft(item)">
                        答案区分大小写
                    </el-checkbox>
                    <el-button style="margin-left:5px;" type="primary" :loading="item.saving" @click="saveQues(item)">
                        保存
                    </el-button>
                    <el-button style="margin-left:5px;" type="primary" :loading="item.saving" @click="toDelQues(index)">
                        删除
                    </el-button>
                    <span v-if="item.id == null || item.draft" style="margin-left:5px;color:red;">未保存</span>
                </div>
                <div v-if="!filter.editMode">
                    <el-input v-model="item.answer" style="width:300px;"></el-input>
                </div>
                <div v-show="item.isEqual != null" style="margin-top:5px;">
                    <span v-if="item.isEqual"><i class="el-icon-check"></i></span>
                    <span v-else style="color:red;"><i class="el-icon-close"></i></span>
                    <span style="margin-left:10px;">标准答案：{{item.stdAnswer}}</span>
                </div>
                <hr style="margin-top: 5px;"/>
            </div>
            <div v-if="!filter.editMode">
                <el-button type="primary" @click="submit">提交</el-button>
                <el-button type="primary" @click="clear">清空</el-button>
            </div>
            <div v-else>
                <el-button type="primary" @click="add">添加</el-button>
            </div>
        </div>
        <el-dialog
                title="章节"
                :visible.sync="chapterDialogVisible"
                width="30%">
            <span>
                <el-input v-model="chapterData.label"></el-input>
            </span>
            <span slot="footer" class="dialog-footer">
            <el-button @click="chapterDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="updateChapter" :loading="chapterData.loading">确 定</el-button>
          </span>
        </el-dialog>
    </div>
</template>

<script>
    import axios from "axios";

    export default {
        name: "write",
        inject: ['isAuthUser'],
        data() {
            return {
                filterCacheKey: 'writeEnglishCacheKey',
                filter: {
                    editMode: false,
                    chapterId: null,
                },
                dataList: [],
                resultList: [],
                rightNum: 0,
                chapterList: [],
                loading: false,
                chapterDialogVisible: false,
                chapterData: {
                    id: null,
                    label: null,
                    loading: false,
                },
            }
        },
        methods: {
            toAddChapter() {
                this.chapterDialogVisible = true
                this.chapterData.id = null
                this.chapterData.label = null
            },
            toUpdateChapter() {
                if (!this.filter.chapterId) {
                    this.$message.error('请选择章节')
                    return
                }
                this.chapterDialogVisible = true
                this.chapterData.id = this.filter.chapterId
                let chapter = this.chapterList.find(c => c.id == this.chapterData.id)
                this.chapterData.label = chapter.label
            },
            async updateChapter() {
                this.chapterData.loading = true
                let postData = {
                    id: this.chapterData.id,
                    name: this.chapterData.label,
                }
                await axios.post('/auth/update_chapter', postData)
                // console.log('response11:', response)
                await this.initChapter()
                this.chapterData.loading = false
                this.chapterDialogVisible = false
            },
            markItemDraft(item) {
                this.$set(item, 'draft', true)
            },
            add() {
                this.dataList.push({
                    id: null,
                    ques: '',
                    std_answer: '',
                    case_sensitive: false,
                    chapter_id: this.filter.chapterId,
                })
            },
            async toDelQues(index) {
                this.$confirm('确定要删除吗？')
                    .then(() => {
                        this.delQues(index)
                    })

            },
            async delQues(index) {
                let item = this.dataList[index]
                if (item && item.id) {
                    // delete_ques
                    let response = await axios.post('/auth/delete_ques?ques_id=' + item.id)
                    console.log('response:', response)
                }
                this.dataList.splice(index, 1)
            },

            async saveQues(item) {
                // console.log('item:', item)
                this.$set(item, 'saving', true)
                let postData = {
                    id: item.id,
                    ques: item.ques,
                    std_answer: item.stdAnswer,
                    case_sensitive: !!item.caseSensitive,
                    chapter_id: this.filter.chapterId,
                }
                let response = await axios.post('/auth/update_ques', postData)
                // console.log('response:', response)
                item.id = response.data
                if (isNaN(item.id)) {
                    console.error('无效请求')
                    return
                }
                this.$set(item, 'saving', false)
                this.$set(item, 'draft', false)
                if (response.status == 200) {
                    this.$message.success("操作成功")
                } else {
                    this.$message.success("操作失败")
                }
            },
            async changeChapter() {
                this.loading = true
                let dataList = []
                if (this.filter.chapterId) {
                    let response = await axios.get('/get_ques_list?chapter_id=' + this.filter.chapterId)
                    // console.log('response:', response)
                    dataList = response.data
                }
                this.dataList = dataList
                this.loading = false
                this.changeFilter()
            },
            async initChapter() {
                // let response = await axios.get('/get_chapter_list')
                // // console.log('response:', response)
                // this.chapterList = response.data
                // await this.changeChapter()
            },
            initData() {
                let dataList = []
                // dataList.push({'ques': '吃早饭', 'answer': '', 'stdAnswer': 'eat breakfast'})
                // dataList.push({'ques': '上英语课', 'answer': '', 'stdAnswer': 'have English class', caseSensitive: true})
                // dataList.push({'ques': '进行体育运动', 'answer': '', 'stdAnswer': 'play sports', caseSensitive: false})
                // dataList.push({'ques': '做早操', 'answer': '', 'stdAnswer': 'do morning exercises', caseSensitive: false})
                // dataList.push({'ques': '吃晚饭', 'answer': '', 'stdAnswer': 'eat dinner', caseSensitive: false})
                // dataList.push({'ques': '打扫我的房间', 'answer': '', 'stdAnswer': 'clean my room', caseSensitive: false})
                // dataList.push({'ques': '散步', 'answer': '', 'stdAnswer': 'go for a walk', caseSensitive: false})
                // dataList.push({'ques': '购物', 'answer': '', 'stdAnswer': 'go shopping', caseSensitive: false})
                // dataList.push({'ques': '上舞蹈课', 'answer': '', 'stdAnswer': 'take a dancing class', caseSensitive: false})
                // dataList.push({'ques': '闹钟', 'answer': '', 'stdAnswer': 'clock', caseSensitive: false})
                // dataList.push({'ques': '聪明的', 'answer': '', 'stdAnswer': 'clever', caseSensitive: false})
                // dataList.push({'ques': '叔叔', 'answer': '', 'stdAnswer': 'uncle', caseSensitive: false})
                // dataList.push({'ques': '盘子', 'answer': '', 'stdAnswer': 'plate', caseSensitive: false})
                // dataList.push({'ques': '茄子', 'answer': '', 'stdAnswer': 'eggplant', caseSensitive: false})
                // dataList.push({'ques': '请', 'answer': '', 'stdAnswer': 'please', caseSensitive: false})
                // dataList.push({'ques': '人们', 'answer': '', 'stdAnswer': 'people', caseSensitive: false})
                // dataList.push({'ques': '苹果', 'answer': '', 'stdAnswer': 'apple', caseSensitive: false})
                // dataList.push({'ques': '紫色', 'answer': '', 'stdAnswer': 'purple', caseSensitive: false})
                // dataList.push({'ques': '什么时候', 'answer': '', 'stdAnswer': 'when', caseSensitive: false})
                // dataList.push({'ques': '工作', 'answer': '', 'stdAnswer': 'work', caseSensitive: false})
                // dataList.push({'ques': '返回', 'answer': '', 'stdAnswer': 'go back to', caseSensitive: false})
                // dataList.push({'ques': '迟', 'answer': '', 'stdAnswer': 'late', caseSensitive: false})
                // dataList.push({'ques': '在夜晚', 'answer': '', 'stdAnswer': 'at night', caseSensitive: false})
                // dataList.push({'ques': '午饭后', 'answer': '', 'stdAnswer': 'after lunch', caseSensitive: false})
                // dataList.push({'ques': '昨晚', 'answer': '', 'stdAnswer': 'last night', caseSensitive: false})
                // dataList.push({'ques': '和', 'answer': '', 'stdAnswer': 'with', caseSensitive: false})
                // dataList.push({'ques': '也（句中）', 'answer': '', 'stdAnswer': 'also', caseSensitive: false})
                // dataList.push({'ques': '忙碌', 'answer': '', 'stdAnswer': 'busy', caseSensitive: false})
                // dataList.push({'ques': '听起来像', 'answer': '', 'stdAnswer': 'sound like', caseSensitive: false})
                // dataList.push({'ques': '需要', 'answer': '', 'stdAnswer': 'need', caseSensitive: false})
                // dataList.push({'ques': '信件', 'answer': '', 'stdAnswer': 'letter', caseSensitive: false})
                // dataList.push({'ques': '居住', 'answer': '', 'stdAnswer': 'live', caseSensitive: false})
                // dataList.push({'ques': '岛', 'answer': '', 'stdAnswer': 'island', caseSensitive: false})
                // dataList.push({'ques': '早', 'answer': '', 'stdAnswer': 'early', caseSensitive: false})
                // dataList.push({'ques': '山洞', 'answer': '', 'stdAnswer': 'cave', caseSensitive: false})
                // dataList.push({'ques': '获胜', 'answer': '', 'stdAnswer': 'win', caseSensitive: false})
                // dataList.push({'ques': '上午', 'answer': '', 'stdAnswer': 'a.m.', caseSensitive: false})
                // dataList.push({'ques': '下午', 'answer': '', 'stdAnswer': 'p.m.', caseSensitive: false})
                // dataList.push({'ques': '总是 100%', 'answer': '', 'stdAnswer': 'always', caseSensitive: false})
                // dataList.push({'ques': '通常 80%', 'answer': '', 'stdAnswer': 'usually', caseSensitive: false})
                // dataList.push({'ques': '经常 60%', 'answer': '', 'stdAnswer': 'often', caseSensitive: false})
                // dataList.push({'ques': '有时 30%', 'answer': '', 'stdAnswer': 'sometimes', caseSensitive: false})
                // dataList.push({'ques': '春天', 'answer': '', 'stdAnswer': 'spring', caseSensitive: false})
                // dataList.push({'ques': '夏天', 'answer': '', 'stdAnswer': 'summer', caseSensitive: false})
                // dataList.push({'ques': '秋天', 'answer': '', 'stdAnswer': 'autumn', caseSensitive: false})
                // dataList.push({'ques': '秋天（美）', 'answer': '', 'stdAnswer': 'fall', caseSensitive: false})
                // dataList.push({'ques': '冬天', 'answer': '', 'stdAnswer': 'winter', caseSensitive: false})
                // dataList.push({'ques': '季节', 'answer': '', 'stdAnswer': 'season', caseSensitive: false})
                // dataList.push({'ques': '去野餐', 'answer': '', 'stdAnswer': 'go on a picnic', caseSensitive: false})
                // dataList.push({'ques': '去游泳', 'answer': '', 'stdAnswer': 'go swimming', caseSensitive: false})
                // dataList.push({'ques': '摘苹果', 'answer': '', 'stdAnswer': 'pick apples', caseSensitive: false})
                // dataList.push({'ques': '堆雪人', 'answer': '', 'stdAnswer': 'make a snowman', caseSensitive: false})
                // dataList.push({'ques': '棕色', 'answer': '', 'stdAnswer': 'brown', caseSensitive: false})
                // dataList.push({'ques': '图书馆', 'answer': '', 'stdAnswer': 'library', caseSensitive: false})
                // dataList.push({'ques': '兄弟', 'answer': '', 'stdAnswer': 'brother', caseSensitive: false})
                // dataList.push({'ques': '雨伞', 'answer': '', 'stdAnswer': 'umbrella', caseSensitive: false})
                // dataList.push({'ques': '绿色', 'answer': '', 'stdAnswer': 'green', caseSensitive: false})
                // dataList.push({'ques': '葡萄', 'answer': '', 'stdAnswer': 'grapes', caseSensitive: false})
                // dataList.push({'ques': '爷爷；外公', 'answer': '', 'stdAnswer': 'grandpa', caseSensitive: false})
                // dataList.push({'ques': '生长；种植', 'answer': '', 'stdAnswer': 'grow', caseSensitive: false})
                // dataList.push({'ques': '漂亮的', 'answer': '', 'stdAnswer': 'beautiful', caseSensitive: false})
                // dataList.push({'ques': '漂亮的', 'answer': '', 'stdAnswer': 'pretty', caseSensitive: false})
                // dataList.push({'ques': '我们将', 'answer': '', 'stdAnswer': 'we\'ll', caseSensitive: false})
                // dataList.push({'ques': '画', 'answer': '', 'stdAnswer': 'draw', caseSensitive: false})
                // dataList.push({'ques': '画', 'answer': '', 'stdAnswer': 'paint', caseSensitive: false})
                // dataList.push({'ques': '每天', 'answer': '', 'stdAnswer': 'every day', caseSensitive: false})
                // dataList.push({'ques': '金黄的', 'answer': '', 'stdAnswer': 'golden', caseSensitive: false})
                // dataList.push({'ques': '草', 'answer': '', 'stdAnswer': 'grass', caseSensitive: false})
                // dataList.push({'ques': '假期', 'answer': '', 'stdAnswer': 'vacation', caseSensitive: false})
                // dataList.push({'ques': '假期', 'answer': '', 'stdAnswer': 'holiday', caseSensitive: false})
                // dataList.push({'ques': '做得好', 'answer': '', 'stdAnswer': 'good job', caseSensitive: false})
                // dataList.push({'ques': '因为', 'answer': '', 'stdAnswer': 'because', caseSensitive: false})
                // dataList.push({'ques': '到处', 'answer': '', 'stdAnswer': 'everywhere', caseSensitive: false})
                // dataList.push({'ques': '可爱的', 'answer': '', 'stdAnswer': 'lovely', caseSensitive: false})
                // dataList.push({'ques': '落下', 'answer': '', 'stdAnswer': 'fall', caseSensitive: false})
                // dataList.push({'ques': '许多', 'answer': '', 'stdAnswer': 'lots of', caseSensitive: false})
                // dataList.push({'ques': '许多', 'answer': '', 'stdAnswer': 'a lot of', caseSensitive: false})
                // dataList.push({'ques': '想要做什么', 'answer': '', 'stdAnswer': 'want to do', caseSensitive: false})
                // dataList.push({'ques': '所有', 'answer': '', 'stdAnswer': 'all', caseSensitive: false})

                dataList.push({'ques': '一月', 'answer': '', 'stdAnswer': 'January', caseSensitive: true})
                dataList.push({'ques': '二月', 'answer': '', 'stdAnswer': 'February', caseSensitive: true})
                dataList.push({'ques': '三月', 'answer': '', 'stdAnswer': 'March', caseSensitive: true})
                dataList.push({'ques': '四月', 'answer': '', 'stdAnswer': 'April', caseSensitive: true})
                dataList.push({'ques': '五月', 'answer': '', 'stdAnswer': 'May', caseSensitive: true})
                dataList.push({'ques': '六月', 'answer': '', 'stdAnswer': 'June', caseSensitive: true})
                dataList.push({'ques': '七月', 'answer': '', 'stdAnswer': 'July', caseSensitive: true})
                dataList.push({'ques': '八月', 'answer': '', 'stdAnswer': 'August', caseSensitive: true})
                dataList.push({'ques': '九月', 'answer': '', 'stdAnswer': 'September', caseSensitive: true})
                dataList.push({'ques': '十月', 'answer': '', 'stdAnswer': 'October', caseSensitive: true})
                dataList.push({'ques': '十一月', 'answer': '', 'stdAnswer': 'November', caseSensitive: true})
                dataList.push({'ques': '十二月', 'answer': '', 'stdAnswer': 'December', caseSensitive: true})
                dataList.push({'ques': '第一', 'answer': '', 'stdAnswer': 'first', caseSensitive: false})
                dataList.push({'ques': '第二', 'answer': '', 'stdAnswer': 'second', caseSensitive: false})
                dataList.push({'ques': '第三', 'answer': '', 'stdAnswer': 'third', caseSensitive: false})
                dataList.push({'ques': '第四', 'answer': '', 'stdAnswer': 'four', caseSensitive: false})
                dataList.push({'ques': '第五', 'answer': '', 'stdAnswer': 'fifth', caseSensitive: false})
                dataList.push({'ques': '第十二', 'answer': '', 'stdAnswer': 'twelfth', caseSensitive: false})
                dataList.push({'ques': '第二十', 'answer': '', 'stdAnswer': 'twentieth', caseSensitive: false})
                dataList.push({'ques': '第二十一', 'answer': '', 'stdAnswer': 'twenty-first', caseSensitive: false})
                dataList.push({'ques': '第二十三', 'answer': '', 'stdAnswer': 'twenty-third', caseSensitive: false})
                dataList.push({'ques': '第三十', 'answer': '', 'stdAnswer': 'thirtieth', caseSensitive: false})
                dataList.push({'ques': '中国', 'answer': '', 'stdAnswer': 'China', caseSensitive: true})
                dataList.push({'ques': '小鸡', 'answer': '', 'stdAnswer': 'chicken', caseSensitive: false})
                dataList.push({'ques': '午餐', 'answer': '', 'stdAnswer': 'lunch', caseSensitive: false})
                dataList.push({'ques': '老师', 'answer': '', 'stdAnswer': 'teacher', caseSensitive: false})
                dataList.push({'ques': '绵羊', 'answer': '', 'stdAnswer': 'sheep', caseSensitive: false})
                dataList.push({'ques': '鱼', 'answer': '', 'stdAnswer': 'fish', caseSensitive: false})
                dataList.push({'ques': '衬衫', 'answer': '', 'stdAnswer': 'shirt', caseSensitive: false})
                dataList.push({'ques': '短裤', 'answer': '', 'stdAnswer': 'shorts', caseSensitive: false})
                dataList.push({'ques': '三', 'answer': '', 'stdAnswer': 'three', caseSensitive: false})
                dataList.push({'ques': '瘦的', 'answer': '', 'stdAnswer': 'thin', caseSensitive: false})
                dataList.push({'ques': '十三', 'answer': '', 'stdAnswer': 'thirteen', caseSensitive: false})
                dataList.push({'ques': '数学', 'answer': '', 'stdAnswer': 'maths', caseSensitive: false})
                dataList.push({'ques': '这个', 'answer': '', 'stdAnswer': 'this', caseSensitive: false})
                dataList.push({'ques': '那个', 'answer': '', 'stdAnswer': 'that', caseSensitive: false})
                dataList.push({'ques': '妈妈', 'answer': '', 'stdAnswer': 'mother', caseSensitive: false})
                dataList.push({'ques': '兄弟', 'answer': '', 'stdAnswer': 'brother', caseSensitive: false})
                this.dataList = dataList
            },
            submit() {
                let rightNum = 0
                for (let item of this.dataList) {
                    let isEqual = false
                    if (item.caseSensitive) {
                        if (item.answer && item.stdAnswer && item.answer.trim() == item.stdAnswer.trim()) {
                            isEqual = true
                        }
                    } else if ((item.answer || '').toLowerCase().trim() == (item.stdAnswer || '').toLowerCase().trim()) {
                        isEqual = true
                    }
                    this.$set(item, 'isEqual', isEqual)
                    if (isEqual) {
                        rightNum++
                    }
                }
                this.rightNum = rightNum
            },
            clear() {
                for (let item of this.dataList) {
                    this.$set(item, 'isEqual', null)
                    this.$set(item, 'answer', '')
                }
            },
            changeFilter() {
                this.$localStorage.set(this.filterCacheKey, this.filter, 4 * 60 * 60 * 1000)
            },
            async getCn(item) {
                let text = item.stdAnswer
                let response = await axios.get('/get_cn?text=' + text)
                // console.log('response:', response)
                this.$set(item, 'cnTxt', response.data)
            }
        },
        watch: {},
        mounted() {
            let filter = this.$localStorage.get(this.filterCacheKey)
            if (filter) {
                this.filter = filter
            }
            // this.initData()
            this.initChapter()
        }
    }
</script>

<style scoped>

</style>
